<template>
  <div class="design-item">
    <div class="design-item-controller">
      <div class="design-item-controller-handle">
        <div
          class="design-component-whitespace-preview"
          :style="{height: height + 'px' , backgroundColor: bgColor}"
        ></div>
      </div>
      <slot name="menu"></slot>
    </div>
    <div class="design-item-editor" v-show="show && !showAddMenuGroup">
      <div>
        <div class="design-item-editor-title">辅助空白</div>

        <div class="editor-group">
          <div class="editor-group-label">背景颜色：</div>
          <div class="editor-group-control">
            <!-- <input class="color-picker-preview" ref="bgColor" v-model="bgColor" /> -->
            <el-color-picker v-model="bgColor"></el-color-picker>
          </div>
        </div>

        <div class="editor-group">
          <div class="editor-group-label">高度：</div>
          <div class="editor-group-control">
            <el-slider v-model="height" show-input></el-slider>
            <!-- <div class="slider">
                            <div class="slider-main">
                                <div ref="slider">
                                    <div class="ui-slider-handle">
                                        <div class="slider-tips slider-tips-hide">
                                            <div class="slider-tips-inner">{{height}}</div>
                                            <i class="slider-tips-arrow"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="slider-input">
                                <input type="text" v-on:blur="bindSliderInput" :value="height"/>
                            </div>
            </div>-->
          </div>
        </div>
      </div>
    </div>
    <slot name="addMenuGroup" v-if="showAddMenuGroup"></slot>
  </div>
</template>
<script>
/**
 * 默认的数据格式
 */
var defaultDataFormat = {
  height: 10,
  bgColor: "#FFFFFF",
  type: "whitespace"
};
export default {
  name: "nc-design-item-whitespace",
  otherInfo: {
    title: "辅助空白",
    type: "whitespace",
    group: 2,
    max: 0
  },
  //外部传入参数
  props: {
    show: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      default: null
    },
    cid: {
      type: Number
    },
    showAddMenuGroup: {
      type: Boolean,
      default: false
    }
  },
  data() {
    let data = this.options.type
      ? {
          height: this.options.height,
          bgColor: this.options.bgColor,
          type: defaultDataFormat.type
        }
      : $.extend(true, {}, defaultDataFormat);
    return $.extend({}, data);
  },
  mounted() {
    var self = this;
    // $(this.$refs.slider).slider({
    //   range: "min",
    //   min: 10,
    //   max: 100,
    //   slide: function(event, ui) {
    //     self.height = ui.value;
    //   }
    // });
    // $(this.$refs.slider).slider("value", self.height);

    // $(this.$refs.bgColor).spectrum({
    //   optionTemplate: 2,
    //   defaultColor: defaultDataFormat.bgColor,
    //   move: function(color) {
    //     self.bgColor = color.toHexString();
    //   },
    //   change: function(color) {
    //     self.bgColor = color.toHexString();
    //   }
    // });
  },
  methods: {
    /**
     * 获取当前数据
     */
    getCurrentData() {
      return {
        height: this.height,
        bgColor: this.bgColor,
        type: this.type
      };
    },
    bindSliderInput(event) {
      let a = $(event.target).val(),
        b = parseInt(a.replace(/\D+/, "")),
        r = isNaN(b) ? 0 : b > 100 ? 100 : b < 10 ? 10 : b;
      this.height = r;
      $(event.target).val(r);
      $(this.$refs.slider).slider("value", r);
    }
  }
};
</script>
<style>
:focus {
  outline: inherit;
}
.ui-widget-header {
  border: 1px solid #dddddd;
  background: #e9e9e9;
  color: #333333;
  font-weight: bold;
}
.ui-slider {
  position: relative;
  text-align: left;
  cursor: pointer;
}
.ui-slider-horizontal {
  height: 0.35em;
}
.ui-widget {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}
.ui-widget-content {
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
  border-top-left-radius: 3px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
  border-bottom-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
  border-bottom-right-radius: 3px;
}
.ui-widget.ui-widget-content {
  border: 1px solid #c5c5c5;
}
.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1em;
  height: 1em;
  cursor: default;
  -ms-touch-action: none;
  touch-action: none;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -0.5em;
  margin-left: -0.6em;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: 2px solid #c5c5c5;
  background: #f6f6f6;
  font-weight: normal;
  color: #454545;
  border-radius: 50%;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: 0.7em;
  display: block;
  border: 0;
  background-position: 0 0;
}
.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}

.ui-slider-handle .slider-tips {
  position: absolute;
  top: -2em;
  left: 0.5em;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  visibility: hidden;
}

.ui-slider-handle .slider-tips-inner {
  padding: 4px 5px;
  background-color: #666;
  border-radius: 2px;
  font-size: 12px;
  color: #fff;
  line-height: 11px;
  position: relative;
  z-index: 2;
  white-space: nowrap;
}

.ui-slider-handle .slider-tips-arrow {
  background: #666;
  -webkit-transform: translate(-50%, 50%) rotate(45deg);
  -moz-transform: translate(-50%, 50%) rotate(45deg);
  -ms-transform: translate(-50%, 50%) rotate(45deg);
  transform: translate(-50%, 50%) rotate(45deg);
  left: 50%;
  position: absolute;
  z-index: 1;
  top: 13px;
  width: 6px;
  height: 6px;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.ui-state-active .slider-tips,
.ui-state-hover .slider-tips {
  visibility: visible;
}
</style>